<template>
  <b-collapse-wrap :title="title" collapse>
    <div class="p16">
      <b-button type="primary" @click="printClick">打印表单1</b-button>
      <div class="p5" />
      <div ref="form1Ref">
        <table
          border="1"
          width="300"
          id="tb01"
          bgcolor="#CCFFCC"
          style="border: solid 1px black; border-collapse: collapse"
        >
          <tr>
            <td width="133" id="mtb001" height="26">
              <span style="color: #ff0000; padding: 6px"><u>&nbsp;《表单一》&nbsp;</u></span>
            </td>
          </tr>
        </table>
        <table
          border="1"
          width="300"
          height="106"
          cellspacing="0"
          bgcolor="#CCFFFF"
          style="border-collapse: collapse; table-layout: fixed; border: solid 1px black"
        >
          <tr>
            <td width="66" height="16" style="border: solid 1px black">
              <span style="color: #0000ff">A等</span>
            </td>
            <td width="51" height="16" style="border: solid 1px black">
              <span style="color: #0000ff">B等</span>
            </td>
            <td width="51" height="16" style="border: solid 1px black">
              <span style="color: #0000ff">C等</span>
            </td>
          </tr>
          <tr>
            <td width="66" height="16" style="border: solid 1px black">
              A
              <sub>01</sub>
            </td>
            <td width="80" height="12" style="border: solid 1px black">中-001</td>
            <td width="51" height="12" style="border: solid 1px black">
              C1
              <sup>x</sup>
            </td>
          </tr>
          <tr>
            <td width="66" height="16" style="border: solid 1px black">
              A
              <sub>02</sub>
              Φ
            </td>
            <td width="80" height="16" style="border: solid 1px black">日-スの</td>
            <td width="51" height="16" style="border: solid 1px black">asdfas</td>
          </tr>
          <tr>
            <td width="66" height="16" style="border: solid 1px black; overflow: hidden">
              A
              <sub>03</sub>
            </td>
            <td width="80" height="16" style="border: solid 1px black; overflow: hidden">
              韩-안녕
            </td>
            <td width="51" height="16">
              C3
              <sup>x</sup>
            </td>
          </tr>
        </table>
      </div>

      <b-divider></b-divider>

      <b-button type="primary" @click="printClick2">打印表单1,2</b-button>
      <b-button type="primary" @click="printClick3">打印表单维护</b-button>
      <div class="p5" />
      <div ref="form2Ref">
        <table
          border="1"
          width="100%"
          id="tb01"
          bgcolor="#CCFFCC"
          style="border: solid 1px black; border-collapse: collapse"
        >
          <tr>
            <td width="133" id="mtb001" height="26">
              <span style="color: #ff0000; padding: 6px"><u>&nbsp;《表单二》&nbsp;</u></span>
            </td>
          </tr>
        </table>
        <table
          border="1"
          width="100%"
          height="106"
          cellspacing="0"
          bgcolor="#CCFFFF"
          style="border: solid 1px black; border-collapse: collapse"
        >
          <tr>
            <td width="66" height="16" style="border: solid 1px black">
              <span style="color: #0000ff">X等</span>
            </td>
            <td width="51" height="16" style="border: solid 1px black">
              <span style="color: #0000ff">Y等</span>
            </td>
            <td width="51" height="16" style="border: solid 1px black">
              <span style="color: #0000ff">X等</span>
            </td>
          </tr>
          <tr>
            <td width="66" height="12" style="border: solid 1px black">
              <span style="font-family: Wingdings; font-size: 25px">&#254;</span>
              X001
            </td>
            <td width="51" height="12" style="border: solid 1px black">Y001</td>
            <td width="51" height="44" rowspan="3" style="border: solid 1px black">
              <ol style="list-style-type: upper-alpha; list-style-position: inside">
                <li>Z001</li>
                <li>Z002</li>
                <li>Z003</li>
                <li>Z004</li>
                <li>Z005</li>
              </ol>
            </td>
          </tr>
          <tr>
            <td width="30%" height="16" style="border: solid 1px black"><strong>X002</strong></td>
            <td width="51" height="16" style="border: solid 1px black">
              <u>Y002</u>
              <span style="visibility: hidden">hidesome</span>
            </td>
          </tr>
          <tr>
            <td width="30%" height="16" style="border: solid 1px black">
              <span style="text-decoration: overline">X003</span>
            </td>
            <td width="40%" height="16" style="border: solid 1px black">
              <em>Y003</em>
              <input type="radio" name="R1" />
              <input type="radio" name="R1" checked />
            </td>
          </tr>
        </table>
      </div>

      <b-divider></b-divider>
      <b-button type="primary" @click="printClickAll">打印全部</b-button>
    </div>
  </b-collapse-wrap>
</template>

<script setup>
import { ref } from 'vue'
import { getLodop } from '@/plugins/lodop/LodopFuncs'
defineProps({
  title: {
    type: String,
    default: '',
  },
})

const form1Ref = ref(null)
const form2Ref = ref(null)
function printClick() {
  const LODOP = getLodop()
  LODOP.PRINT_INIT('打印控件功能演示_Lodop功能_表单一')
  LODOP.SET_PRINT_STYLE('FontSize', 18)
  LODOP.SET_PRINT_STYLE('Bold', 1)
  LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 1000, 1200, '') // 演示设置各种样式的打印预览窗口：
  LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, '打印页面部分内容')
  LODOP.ADD_PRINT_HTM(88, 200, 350, 600, form1Ref.value.innerHTML)
  // 直接打印
  // LODOP.PRINT()
  // 设计模式
  // LODOP.PRINT_DESIGN()
  LODOP.PREVIEW() // 打印预览
}

function printClick2() {
  const LODOP = getLodop()
  LODOP.PRINT_INIT('打印控件功能演示_Lodop功能_表单二')
  LODOP.ADD_PRINT_RECT(70, 27, 634, 242, 0, 1)
  LODOP.ADD_PRINT_TEXT(29, 236, 279, 38, '页面内容改变布局打印')
  LODOP.SET_PRINT_STYLEA(2, 'FontSize', 18)
  LODOP.SET_PRINT_STYLEA(2, 'Bold', 1)
  LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 1000, 1200, '') // 演示设置各种样式的打印预览窗口：
  LODOP.ADD_PRINT_HTM(88, 40, 321, 185, form1Ref.value.innerHTML)
  LODOP.ADD_PRINT_HTM(87, 355, 285, 187, form2Ref.value.innerHTML)
  LODOP.ADD_PRINT_TEXT(
    319,
    58,
    500,
    30,
    '注：其中《表单一》按显示大小，《表单二》在程序控制宽度(285px)内自适应调整',
  )
  LODOP.PREVIEW() // 打印预览
}
function printClick3() {
  const LODOP = getLodop()
  LODOP.PRINT_INIT('打印控件功能演示_Lodop功能_表单二')
  LODOP.ADD_PRINT_RECT(70, 27, 634, 242, 0, 1)
  LODOP.ADD_PRINT_TEXT(29, 236, 279, 38, '页面内容改变布局打印')
  LODOP.SET_PRINT_STYLEA(2, 'FontSize', 18)
  LODOP.SET_PRINT_STYLEA(2, 'Bold', 1)
  LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 1000, 1200, '') // 演示设置各种样式的打印预览窗口：
  LODOP.ADD_PRINT_HTM(88, 40, 321, 185, form1Ref.value.innerHTML)
  LODOP.ADD_PRINT_HTM(87, 355, 285, 187, form2Ref.value.innerHTML)
  LODOP.ADD_PRINT_TEXT(
    319,
    58,
    500,
    30,
    '注：其中《表单一》按显示大小，《表单二》在程序控制宽度(285px)内自适应调整',
  )
  LODOP.PRINT_SETUP()
}

function printClickAll() {
  const LODOP = getLodop()
  LODOP.PRINT_INIT('打印控件功能演示_Lodop功能_全页')
  LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', document.documentElement.innerHTML)
  LODOP.PREVIEW()
}
</script>

<style scoped></style>
